import { Component, OnInit } from "@angular/core";
import { MatDialogRef } from "@angular/material/dialog";
import { Store, select } from "@ngrx/store";
import { AppState, Selectors } from "src/app/store";
import * as keywordActions from "src/app/store/actions/keyword.action";
@Component({
  selector: "app-search-tool",
  templateUrl: "./search-tool.component.html",
  styleUrls: ["./search-tool.component.scss"]
})
export class SearchToolComponent implements OnInit {
  theme: string = "";
  keyword: string = "";
  constructor(
    public dialogRef: MatDialogRef<SearchToolComponent>,
    private store$: Store<AppState>
  ) {}

  ngOnInit(): void {
    this.store$.subscribe(state => {
      this.theme = state[Selectors.theme].theme;
      this.keyword = state[Selectors.keyword].keyword;
    });
  }

  closePanel() {
    this.dialogRef.close();
  }

  doSearch() {
    this.store$.dispatch(
      keywordActions.setKeyword({
        propKeyword: this.keyword
      })
    );
    this.closePanel();
  }
}
